<template>
  <section class="page-container">
    <img
      ref="introImg"
      :src="DemoImg"
      alt="示例图片"
      width="300"
    >
    <section
      ref="header"
      class="mt-12"
    >
      使用useAnimateCss动画钩子实现动画
    </section>

    <a
      class="mt-12"
      href="https://animatecss.node.org.cn/"
      target="_blank"
    >只需添加水就能实现的 CSS 动画 Animate.css</a>
  </section>
</template>

<script lang="ts" setup name="Animate">
import { ref, onMounted } from 'vue';
import 'animate.css';

import DemoImg from '@/assets/images/cropper-demo.jpeg';
import { useAnimateCss } from '@/hooks/index';

const introImg = ref();
const header = ref();

const domAnimate = () => {
  // 对introImg元素应用fadeInRight动画，同样在动画开始前将其显示状态改为可见
  useAnimateCss(introImg.value, 'fadeInRight').then(() => {
    console.log('introImg动画结束');
  });
  // 为header元素应用fadeInDown动画
  useAnimateCss(header.value, 'fadeInDown');
};

onMounted(() => {
  domAnimate();
});
</script>

<style lang="scss" scoped>
.page-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
